<div class="container mx-auto px-6 lg:px-0">
	<nav class="flex items-center justify-between flex-wrap py-6">
		<div class="flex items-center">
			<a href="/" class="items-center text-3xl font-bold tracking-wide mr-8">India<span class="tracking-wide text-yellow-500">OS</span></a>
		</div>
		<div class="flex items-center lg:hidden">
			<button id="menuButton" class="flex items-center text-yellow-500">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
			</button>
		</div>
		<div id="menuBody" class="lg:flex flex-col lg:flex-row items-center text-bg w-full lg:pt-0 lg:w-auto hidden mt-5 lg:mt-0">
			<div class="py-3 ml-2 lg:py-0 lg:ml-0 text-left">
				<a href="/why-indiaos" class="block font-base font-mono no-underline text-grey-darkest mr-0 lg:mr-8">
					Why IndiaOS
				</a>
			</div>
			{% set settings = frappe.get_doc("Conference Settings") %}
			{% if settings.publish_agenda %}
			<div class="py-3 ml-2 lg:py-0 lg:ml-0 text-left">
				<a href="/agenda" class="block font-base font-mono no-underline text-grey-darkest mr-0 lg:mr-8">
					Agenda
				</a>
			</div>
			{% endif %}
			<div class="py-3 lg:py-0 text-left">
				<a href="https://forum.indiaos.in" target="_blank" class="block font-base font-mono no-underline text-grey-darkest bg-yellow-400 px-3 py-2 rounded border-yellow-500 border-b-4 hover:border-yellow-600">
					Join The Forum
				</a>
			</div>
			{% if settings.ticketing == "Open" %}
			<div class="py-3 lg:py-0 text-left">
				<button onclick="openModal()" href="#responsive-header" class="block font-base font-mono no-underline text-grey-darkest bg-yellow-400 px-3 py-2 rounded border-yellow-500 border-b-4 hover:border-yellow-600">
					Register
				</button>
			</div>
			{% endif %}
		</div>
	</nav>
</div>
<script>
	const menuButton = document.getElementById("menuButton");
	const menuBody = document.getElementById("menuBody");
	menuButton.onclick = () => toggleMenu();

	function toggleMenu() {
		if (menuBody.classList.contains("hidden")) {
			menuBody.classList.remove("hidden")
		}
		else {
			menuBody.classList.add("hidden")
		}
	}
</script>

{% include "templates/includes/modal.html" %}